<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6"></el-col>
            <el-col :span="6"><img :src="GoodsForm.goodsPicture" style="width: 400px;"></el-col>
            <el-col :span="6">
                <h1>{{ GoodsForm.goodsName }}</h1>
                <span v-html="GoodsForm.goodsDesc"></span>
                <h3 style="color: red;">价格：￥{{ GoodsForm.goodsPrize }}</h3>
                <div style="display: flex; align-items: center;margin-left: 150px;">
                    <el-input-number v-model="cartInfo.cartCount" :min="1" :max="10" />
                    <h4 style="color: red; margin-left: 10px;">共计：￥{{ totalPrice }}</h4>
                </div>
                <br><br>
                <el-button @click="addCart">添加购物车</el-button>
                <el-button @click="addOrders">立即下单</el-button>
            </el-col>
            <el-col :span="6"></el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6"></el-col>
            <el-col :span="12">
                <div style="text-align: left;">
                    <el-form :inline="true" :model="pageHelper" class="demo-form-inline">
                        <el-form-item label="评论分类" prop="commentsTypeId">
                            <el-select v-model="pageHelper.commentsTypeId" class="m-2" placeholder="Select">
                                <el-option label="请选择" value="" @click="handleCurrentChange(pageHelper.currentPage)" />
                                <el-option v-for="item in commentsTypeOptions.commentsType" :key="item.id" :label="item.commentsType"
                                    :value="item.id" @click="handleCurrentChange(pageHelper.currentPage)" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div style="width: 100%;">
                    <el-table :data="state.list" border style="width: 100%">
                        <el-table-column prop="commentsType" label="评论分类" width="110" />
                        <el-table-column prop="commentsPicture" label="图片" width="120">
                            <template v-slot="{ row }">
                                <img :src="row.commentsPicture" alt="commentsPicture" style="width: 90px; height: 90px;">
                            </template>
                        </el-table-column>
                        <el-table-column prop="comments" label="评论" min-width="180">
                            <template v-slot="{ row }">
                                <span v-html="row.comments"></span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="example-pagination-block">
                        <el-pagination layout="prev, pager, next" :total="pageHelper.total" :page-size="pageHelper.pageSize"
                            :current-page="pageHelper.currentPage" @current-change="handleCurrentChange" />
                    </div>
                </div>
            </el-col>
            <el-col :span="6"></el-col>
        </el-row>

    </div>
</template>
    
<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { ElNotification, FormInstance } from 'element-plus'
import { useRoute } from 'vue-router'
import api from '@/api';
import store from '@/store';
import router from '@/router';

const route = useRoute()

const GoodsForm = ref({
    id: route.params.id,
    goodsName: route.params.goodsName,
    goodsPrize: Number(route.params.goodsPrize),
    goodsDesc: route.params.goodsDesc,
    goodsPicture: route.params.goodsPicture as string,
    goodsReleaseTime: route.params.goodsReleaseTime,
    goodsTypeId: Number(route.params.goodsTypeId),
    goodsType: route.params.goodsType
})

const pageHelper = reactive({
    goodsName: '',
    total: 10, // 总数据量
    pageSize: 5, // 每页显示的数据数量
    currentPage: 1, // 当前页码
    commentsTypeId:''
})

const state = reactive({
    list: [] as any
})

onMounted(() => {
    // 页面加载完成后自动触发查询，假设初始页码为 1
    handleCurrentChange(1);
});


const onSubmit = () => {
    handleCurrentChange(pageHelper.currentPage)
}

function handleCurrentChange(page: number): void {
    // 更新页码
    pageHelper.currentPage = page;
    // 在这里可以根据当前页码，请求对应的数据
    // 例如：fetchData(page);
    // 发送 Axios 请求
    api.comments.getCommentsList({
        goodsId: route.params.id,
        commentsTypeId: pageHelper.commentsTypeId,
        pageNum: page,
        pageSize: pageHelper.pageSize,
    })
        .then(response => {
            // 请求成功，处理返回的数据
            // 更新数据
            pageHelper.total = response.data.data.total;
            state.list = response.data.data.list;
            // 其他操作...
        })
        .catch(error => {
            // 请求失败，处理错误信息
            console.error(error);
        });
}

const commentsTypeOptions = reactive({
    commentsType: [] as any
})

// 异步请求获取下拉框选项
api.comments.getCommentsTypeList()
    .then(response => {
        commentsTypeOptions.commentsType = response.data.data;
    });

// 计算总价的计算属性
const totalPrice = computed(() => {
    return GoodsForm.value.goodsPrize * cartInfo.value.cartCount;
});

const cartInfo = ref({
    userId: (store.state as any).user.userInfo.id,
    goodsId: GoodsForm.value.id,
    cartCount: 1
})

const addCart = () => {
    api.cart.addCart(cartInfo.value)
        .then(response => {
            // 在这里可以处理提交成功后的逻辑
            ElNotification({
                title: 'Success',
                message: response.data.msg,
                type: 'success',
                duration: 1500
            })
        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
            // 在这里可以处理提交失败后的逻辑
        });
}

function addOrders() {
    router.push({
        name: 'addorders', params: {
            userId: (store.state as any).user.userInfo.id,
            userName: (store.state as any).user.userInfo.userName,
            goodsId: GoodsForm.value.id,
            goodsName: GoodsForm.value.goodsName,
            orderPrize: totalPrice.value,
            goodsTypeId: GoodsForm.value.goodsTypeId,
            goodsType: GoodsForm.value.goodsType,
            goodsPicture: GoodsForm.value.goodsPicture,
            orderCount: cartInfo.value.cartCount,
            telephone: (store.state as any).user.userInfo.telephone
        }
    })
}
</script>

<style>
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
</style>